<template>
<div>
  <el-form :model="fromData" label-width="100px" :show-message="false" :rules="fromDataRules" ref="fromData">
    <el-timeline :reverse="false">
      <el-timeline-item
        v-for="(activity, index) in refundRecord"
        :key="index"
        :color="activity.color"
        :timestamp="activity.auditTime">
        <div v-show="activity.auditBy">{{activity.auditBy}}： {{activity.statusValue}}</div>
        <el-row style="margin-top: 20px" v-show="index === 0">
          <el-col :span="14">
            <el-form-item label="退款金额:" label-width="80px">
              <el-radio-group v-model="activity.fullAmount" disabled size="mini">
                <el-radio-button :label="true">全款</el-radio-button>
                <el-radio-button :label="false">部分</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label-width="0px" v-show="!activity.fullAmount">
              <span>￥{{activity.returnAmount}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="申请备注:" label-width="80px">
              <el-input type="textarea" v-model="activity.remark" disabled show-word-limit :autosize="{ minRows: 4, maxRows: 6 }" placeholder="备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px" v-if="index !== 0 && activity.finish">
          <el-form-item label="处理备注:" label-width="80px">
            <el-input type="textarea" v-model="activity.remark" disabled show-word-limit :autosize="{ minRows: 4, maxRows: 6 }" placeholder="备注"></el-input>
          </el-form-item>
        </el-row>

        <el-row v-if="refundRecord.length === index+1 && !activity.finish">
          <el-form-item label="处理状态:" label-width="80px">
            <el-select v-model="fromData.status">
              <el-option
                v-for="item in auditStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="处理备注:" label-width="80px">
            <el-input type="textarea" v-model="fromData.remark" clearable show-word-limit :autosize="{ minRows: 4, maxRows: 6 }" placeholder="备注"></el-input>
          </el-form-item>
        </el-row>
      </el-timeline-item>
    </el-timeline>

    <el-row v-if="refundRecord.length == 0">
      <el-form-item label="工单编号:" >
        <span>{{fromData.code}}</span>
      </el-form-item>
      <el-form-item label="工单金额:">
        <span>￥{{fromData.amount}}</span>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="退款金额:">
            <el-radio-group v-model="fromData.fullAmount" size="mini">
              <el-radio-button :label="true">全款</el-radio-button>
              <el-radio-button :label="false">部分</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="!fromData.fullAmount">
            <el-input v-model.number="fromData.returnAmount" clearable placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="申请备注:" prop="remark">
        <el-input type="textarea" v-model="fromData.remark" clearable show-word-limit :autosize="{ minRows: 4, maxRows: 6 }" placeholder="备注"></el-input>
      </el-form-item>
    </el-row>

    <el-row v-if="refundRecord.length == 0 || !refundRecord[refundRecord.length - 1]['finish']">
      <el-col :span="24" align="right">
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </el-col>
    </el-row>

    <el-row v-if="refundRecord.length == 3 && refundRecord[refundRecord.length - 1]['finish']">
      <el-col :span="24" align="right">
        <el-button type="primary" @click="submitOrder">生成退款码</el-button>
      </el-col>
    </el-row>
  </el-form>


  <el-dialog
    title="二维码退款"
    :visible.sync="dialogVisible"
    width="1100px"
  >
    <QRCode
      :amount="fromData.amount"
      :paymentType="1"
      :baseUrl="baseUrl"
      @cancel="dialogVisible=false"
      @paySuccess="paySuccess"
      @refreshCode="submitOrder"
    />
  </el-dialog>

</div> 
</template>

<script>
  import { refundProcess, refundProcessHistory } from "@/api/after-sale/workOrderManage/orderManage";
  import { parseTimeToYMDHMS } from "@/utils";
  import QRCode from '@/components/QRCode/index';//二维码付款组件
  import { paymentRefundQrCode } from '@/api/after-sale/payment';
  export default {
    name: 'DialogDataForm',
    components: { QRCode },
    props: {
      value: {
        type: Object,
        default: () => ({})
      },
      type: {
        type: String,
        default: () => ('')
      }
    },
    data() {
      return {
        fromData: {
          code: '',
          amount: null,
          remark: '',
          type:'全款',
          billId: null,
          fullAmount: true,
        },
        refundRecord: [],
        fromDataRules: {
          remark: [{required: true, trigger: 'blur'}],
        },
        auditStatusOptions: [
          { value: 1, label: '通过' },
          { value: 2, label: '拒绝' },
        ],
        dialogVisible: false,
        baseUrl: '',
      }
    },
    created() {
      const {code, amount, id} = this.value;
      this.fromData.code = code;
      this.fromData.amount = amount;
      this.fromData.billId = id;
      this.getRefundDetail();
    },
    methods: {
      async getRefundDetail() {
        const {success, data} = await refundProcessHistory(this.value.id);
        if (success) {
          data.forEach(e => {
            e.auditTime = parseTimeToYMDHMS(e.auditTime);
            e.color = '#0bbd87';
            e.finish = true;
          });
          if (data.length > 0 && data.length < 3) {
            data.push({
              auditTime: parseTimeToYMDHMS(new Date()),
              finish: false
            })
          }
          this.refundRecord = data;
        }
      },
      onSubmit() {
        this.$refs.fromData.validate(valid => {
          if (valid) {
            const refundAuditStatus = this.refundRecord ? this.refundRecord.length : 1;
            this.fromData.status = this.fromData.status ? this.fromData.status : 0;
            refundProcess(refundAuditStatus, this.fromData).then(res=> {
              if (res.success) {
                this.$message.success('操作成功');
                this.$emit('close', true)
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            return false
          }
        })
      },
      async submitOrder () {
        let { value } = this;
        let params = {
          // storeId: value.storeId,
          paymentType: 9,//8 预付收款 9支付收款
          name: value.clientName,
          workOrderNo: value.code,
          // jsCode: value.jsCode,
        };
        const { data, success } =  await paymentRefundQrCode(params);
        if (success) {
          this.baseUrl = data;
          this.dialogVisible = true;
        }
      },
      paySuccess () {
        this.closeRouter();
      },
    },
  }
</script>
<style lang="scss" scoped>
</style>

